<template>
  <el-menu default-active="正在进行" class="el-menu-demo" mode="horizontal">
    <div style="position: relative; top: 15px; height: 0; font-weight:bold; font-size: 20px">实验追踪</div>
    <el-menu-item index="" @click="goBack">
      <i class="el-icon-back"></i>
      <span>返回主页</span>
    </el-menu-item>
    <el-menu-item index="正在进行">
      <i class="el-icon-s-flag"></i>
      <span>正在进行</span>
    </el-menu-item>
  </el-menu>
  <center>
    <div style="max-width: 1000px; margin-bottom: 20px; margin-top: 20px">
      <el-input v-model="search" placeholder="填入项目名称进行搜索" ></el-input>
    </div>
    <el-collapse style="max-width: 1000px" model="1" accordion v-for="ep in experiment" :key="ep.experiment_id">
    <el-collapse-item :title="ep.experiment_id+' - '+ep.experiment_name" name="1"
                      v-show="searchPicker(ep.experiment_name)">
      <div style="margin-left: 50px">
        <el-table :data="ep.message" style="width: 100%">
          <el-table-column prop="pi_id" label="独立PI编号"/>
          <el-table-column prop="pi_name" label="独立PI姓名"/>
          <el-table-column prop="ac_id" label="实验助理编号"/>
          <el-table-column prop="ac_name" label="实验助理姓名"/>
        </el-table>
        <v-chart class="chart" autoresize :option="ep.step_option"/>
        <el-collapse model="1" accordion v-for="ui in ep.unit" :key="ui.step_name+'_'+ui.step_priority">
          <el-collapse-item :title="'第'+ui.step_priority+'步：'+ui.step_name" name="1">
            <div style="margin-left: 50px">
              <v-chart class="chart" autoresize :option="ui.unit_option"/>
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-button type="danger" plain style="width: 100%"
                   icon="el-icon-circle-close" @click="dropExp(ep.experiment_id)">
          撤销实验
        </el-button>
      </div>
    </el-collapse-item>
  </el-collapse>
  </center>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { GraphChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";
import {ElMessage} from "element-plus";
import {get} from "@/utils/http";
import GLOBAL from "@/utils/global_variable"
use([ CanvasRenderer, TitleComponent, TooltipComponent, LegendComponent, GraphChart]);

export default defineComponent({
  name: "ExpPage",
  components: { VChart },
  provide: { [THEME_KEY]: "default" },
  data(){
    return{
      experiment: null,
      tryit: null,
      search: "",
      data1: {
        data: [
          { name: 'A', value: '提取DNA', state: 2 },
          { name: 'B', value: '基因注入', state: 1 },
          { name: 'C', value: 'DNA检查', state: 0 }
        ],
        links: [
          { source: 'A', target: 'B' },
          { source: 'B', target: 'C' }
        ]
      },
      data2: {
        data: [
          { name: 'A', value: '抽血', state: 2 },
          { name: 'B', value: '离心', state: 2 },
          { name: 'C', value: 'PCR倍增', state: 2 }
        ],
        links: [
          { source: 'A', target: 'B' },
          { source: 'B', target: 'C' }
        ]
      },
      data3: {
        data: [
          { name: 'A', value: 'DNA修饰', state: 2 },
          { name: 'B', value: '电穿孔基因导入', state: 1 },
          { name: 'C', value: 'T-RNA基因导入', state: 0 },
          { name: 'D', value: '观察表型', state: 0 },
        ],
        links: [
          { source: 'A', target: 'B' },
          { source: 'A', target: 'C' },
          { source: 'B', target: 'D' },
          { source: 'C', target: 'D' }
        ]
      },
      data4: {
        data: [
          { name: 'A', value: '抽血', state: 0 },
          { name: 'B', value: '离心', state: 0 },
          { name: 'C', value: 'DNA测序', state: 0 },
        ],
        links: [
          { source: 'A', target: 'B' },
          { source: 'B', target: 'C' }
        ]
      },
    }
  },
  created() {
    // this.searchExp()
    this.experiment = [
      {
        experiment_id: '01',
        experiment_name: '生猪养殖研究 - 离线示例',
        project_id: '05',
        project_name: '生猪 Project',
        message: [{
          pi_id: '93',
          pi_name: '王小乐',
          ac_id: '25',
          ac_name: '张小仙'
        }],
        step_option: this.getChart(this.data1, 'roundRect'),
        unit: [
          {
            step_name: '提取DNA',
            step_priority: 0,
            unit_option: this.getChart(this.data2)
          }, {
            step_name: '基因注入',
            step_priority: 1,
            unit_option: this.getChart(this.data3)
          }, {
            step_name: 'DNA检查',
            step_priority: 2,
            unit_option: this.getChart(this.data4)
          },
        ]
      },
    ]
    this.searchExp()
  },
  methods: {
    searchPicker(na) {
      let str = ['',...this.search,''].join('.*');
      let reg = new RegExp(str) //正则
      return reg.test(na)
    },
    goBack() {
      this.$router.push({
        name: "MainPage",
        params: {
          uid: this.uid
        }
      })
    },
    getChart(v_data, type='pin') {
      return ref({
        series: [{
          type: 'graph',
          layout: 'force',
          force: { repulsion: 500, edgeLength: 200 },
          draggable: true,
          symbol: type,
          symbolSize: 40,
          roam: true,
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [10, 10],
          edgeLabel: { fontSize: 25 },
          lineStyle: {
            color: '#473C8B',
            width: 3,
          },
          data: v_data.data,
          links: v_data.links,
          label: {
            show: true,
            fontSize: 16,
            color: '#000',
            formatter: function(params) { return params.data.value },
            position: 'bottom',
          },
          itemStyle: {
            normal: {
              color: function(params) {
                var colorList = [ '#C0C0C0','#FFFF00','#00FF00','#FF0000' ];
                return colorList[params.data.state]
              },
            },
          },
        }]
      })
    },
    searchExp() {
      let that = this;
      get('/expbooking/get_exp_mes', {
        uid: GLOBAL.params.uid,
        utypeid: GLOBAL.params.typeId
      }).then(function (res) {
        if (res.code === 1) {
          that.tryit = []
              res.data
          for (let ep_N in res.data) {
            let ep = res.data[ep_N]
            if (ep.pre_progress_id<'19999990' || ep.pre_progress_id>'39990000'){ continue }
            that.tryit.push(ep)
            ep.message = [{
              pi_id: ep.independent_pi_id,
              pi_name: ep.independent_pi_name,
              ac_id: ep.lab_assistant_id,
              ac_name: ep.lab_assistant_name
            }]
            delete ep.independent_pi_id
            delete ep.independent_pi_name
            delete ep.lab_assistant_id
            delete ep.lab_assistant_name
            // ep.step_option = that.getChart(that.data1, 'roundRect')
            // ep.unit = [
            //   {
            //     step_name: '打开',
            //     step_priority: 0,
            //     unit_option: that.getChart(that.data2)
            //   }, {
            //     step_name: '关闭',
            //     step_priority: 1,
            //     unit_option: that.getChart(that.data2)
            //   },
            // ]
            that.getUnitData(ep)
          }
        } else {
          ElMessage.warning({
            showClose: true,
            message: "查询失败，请检查网络状态！",
            type: "warning",
            center: true
          })
        }

      })
    },
    getUnitData(ep) {
      let that = this;
      get('/expbooking/get_step_iden', {
        exp_id: ep.experiment_id
      }).then(function (res) {
        if (res.code === 1) {
          ep.unit = []
          ep.stepMes = []
          ep.unitNum = res.data.length
          for (var da in res.data){
            let dai = res.data[da]
            that.setEpUnit(ep, ep.experiment_id, dai.step_id, dai.step_priority, dai.step_name)
          }
        } else {
              ElMessage.warning({
                showClose: true,
                message: "查询失败，请检查网络状态！",
                type: "warning",
                center: true
              })
            }
      })
    },
    setEpUnit(ep, exp_id, step_id, step_pr, step_name){
      let that = this;
      get('/expbooking/get_unit_iden_mes', {
        exp_id: exp_id,
        step_id: step_id,
        step_pr: step_pr
      }).then(function (res) {
        if (res.code === 1) {
          ep.unit.push({
            step_name: step_name,
            step_priority: step_pr,
            unit_option: that.getChart(that.getMapData(res.data))
          })
          let prog_id = '30019990'
          let an = true
          let bn = true
          for (let en in res.data) {
            let ei = res.data[en]
            if (ei.progress_id>'29999990'){an=false}
            if (ei.progress_id!=='30029990'){bn=false}
            if (ei.progress_id.charAt(ei.progress_id.length-1)==='3'){prog_id='20010023';break}
          }
          if (an) {prog_id='29999990'}
          if (bn) {prog_id='30029990'}
          ep.stepMes.push({
            id: step_id,
            name: step_name,
            priority: step_pr,
            progress_id: prog_id,
            progress_description: '',
            progress_type: ''
          })
          ep.unitNum = ep.unitNum-1
          if (ep.unitNum===0){
            ep.step_option = that.getChart(that.getMapData(ep.stepMes), 'roundRect')
            console.log(that.tryit)
            that.experiment = that.tryit
          }
        } else {
          ElMessage.warning({
            showClose: true,
            message: "查询失败，请检查网络状态！",
            type: "warning",
            center: true
          })
        }
      })
    },
    getMapData(resData) {
      // resData+1
      // resData = [
      //   { id: 'A', name: '抽血', priority: 0, progress_id: '20010023', progress_description: '动物不足', progress_type: 'off'},
      //   { id: 'B', name: '???', priority: 3, progress_id: '29999990', progress_description: '完成实验前准备', progress_type: 'on' },
      //   { id: 'C', name: 'DNA', priority: 1, progress_id: '30019990', progress_description: '完成实验数据下载', progress_type: 'on' },
      //   { id: 'D', name: 'HHH', priority: 1, progress_id: '30029990', progress_description: '完成功能单元', progress_type: 'on' }
      // ]
      var DATA = { data: [], links: [] }
      for (let i in resData) {
        let unit = resData[i]
        let state = 1
        if (unit.progress_id==='30029990'){state=2}
        if (unit.progress_id<='29999990'){state=0}
        if (unit.progress_id.charAt(unit.progress_id.length-1)==='3'){state=3}
        DATA.data.push({
          name: unit.name+'v'+unit.id+'v'+unit.priority,
          value: unit.name,
          state: state
        })
        let maxmi = -9999
        for (let j in resData) {
          let un = resData[j]
          if (un.priority<unit.priority && un.priority>maxmi) {
            maxmi=un.priority
          }
        }
        for (let j in resData) {
          let un = resData[j]
          if (maxmi===un.priority){
            DATA.links.push({
              source: un.name+'v'+un.id+'v'+un.priority,
              target: unit.name+'v'+unit.id+'v'+unit.priority
            })
          }
        }
      }
      return DATA
    },
    dropExp(experiment_id) {
      let that = this
      get('/expbooking/drop_exp', {
        exp_id: experiment_id
      }).then(function (res) {
        if (res.code === 1) {
          ElMessage.success({
            showClose: true,
            message: "撤销成功！",
            type: "success",
            center: true
          })
          that.searchExp()
        } else {
          ElMessage.warning({
            showClose: true,
            message: "撤销失败，请刷新重试！",
            type: "warning",
            center: true
          })
        }
      })
    }
  }
});
</script>

<style scoped>
.chart {
  width: 100%;
  height: 300px;
}
</style>

